<template>
<div class="spxqy">

  <div class="hide show">
      <div class="ui-header ui-header-stable ui-border-b">
           <router-link :to="'/fenlei/'"><img src="../../../static/imgs/icon-return.png"/></router-link>
          <h1>天天坚果</h1>
          <a href="#">...</a>
      </div>
      <div class=" fixed-wrap">
          <ul class="ui-list-sequence ui-border-b">
              <li class="theme" >
                  <span>综合</span>
              </li>
              <li >
                 
                  <span>销量优先</span>
                 
              </li>
              <li >
                  <span>筛选</span>
              </li>
              <li >
                  <span><img src="../../../static/imgs/3_05.png"/></span>
              </li>
          </ul>
      </div>
  </div>
  <!--
  <product :productList='list'></product>
  -->
  <div style="height:1rem;"></div>
    <div class="pro-list">
        <ul class="ui-lie">

            <li class="ui-col" v-for="item in shuju">
                <router-link :to="'/goodDetail/'">
                    <div class="bgw">
                          <img :src="item.picUrl"/>
                      </div>
                      <h4 class="ui-nowrap-multi baseL1">{{item.name}}</h4>
                      <div class="multi">
                          <img class="Img" src="http://cdn.oudianyun.com/lyf-local/branch/back-promotion/1487756014291_5897_78.png"/>
                          <img class="Img" src="http://cdn.oudianyun.com/lyf-local/branch/back-promotion/1495769619560_1803_118.png"/>
                      </div>
                      <p>{{"￥"+item.price}}</p>
                      <span><i>666</i>好评<img src="../../../static/imgs/3_14.png"/></span>
                </router-link>
            </li>
             
        </ul>
    </div>
  </div>
  
</div>
</template>
<script>
 
export default {
   
  data (){
         return {
              shuju : [],
              
         }
     },
  mounted() {
    fetch("../../static/data/fenlei/spsj.json").then(res=>{
       
          return res.json();
    }).then(res=>{
        this.shuju = res.data.productList
        // console.log(this.shuju);
        // console.log()
    })    
  }

}
</script>
<style scoped>
  *{
    margin:0;
    padding:0;
  }
  .spxqy{
    width:100%;
    background:#f8f8f8;  
  }
  .hide{
    width:100%;
    position:fixed;
  }
 .ui-border-b{
    width:100%;
    height:.44rem;
    line-height:.44rem;
    display:flex;
    flex-wrap:nowrap;
    flex-direction:row;
    justify-content:space-between;
    border-bottom:.01rem solid #f8f8f8;
    background:#fff;
 }
 .ui-border-b>a>img{
    padding-top:.15rem;
    padding-left:.01rem;
    width:.2rem;
    height:.2rem;
    display:inline-block;
    
 }
 .ui-border-b a{
   padding-right:.1rem;
  }
  .ui-border-b h1{
    font-size:.18rem;
  }
  .ui-list-sequence span{
    font-size:.14rem;
    padding-left:.1rem;
    padding-right:.1rem;
    position:relative;
  }
 .ui-list-sequence span img{
    position:absolute;
    right:.1rem;
    top:.01rem;
 }
  .pro-list{
    width:100%;
    height:100%;
    overflow-y:scroll;
  }
 .pro-list .ui-lie{
    float:left;
    background-color:#f8f8f8;
 }
 .pro-list .ui-lie .ui-col{
    float:left;
    width:45%;
    height:2.71rem;
    background-color:#fff;
    margin-left:.13rem;
    margin-top:.1rem;
   
 }
 .ui-col .bgw{
    
 }
 .ui-col .bgw img{
   width:100%;
   height:1.57rem;
 }
  .ui-col h4{
    padding-top:.1rem;
    padding-left:.05rem;
    font-size:.14rem;
  }
 .ui-col .multi{
  //  height:.1rem;
  //  float:left;
   padding-left:.05rem;
 }
 .ui-col p{
   color:#ff6900;
   font-size:.2rem;
   height:.22rem;
   padding-top:.2rem;
  //  float:left;
  // display:inline-block;
 }
 .ui-col>span{
   width:100%;
   font-size:.15rem;
   padding-left:.05rem;
   padding-bottom:.1rem;
 }
 .ui-col>span>i{
   float:left;
   color:red;
 }
 .ui-col>span>img{
   float:right;
   padding-right:.05rem;
 }
 .multi>.Img{
   width:.3rem;
   height:.18rem;
   float:left;
   padding-right:.1rem;
 }
.ui-lie{
  
}
</style>

